<template>
  <view class="search-section">
    <view class="search-bar" @click="$emit('search')">
      <view class="search-icon">🔍</view>
      <input class="search-input" placeholder="搜索想要的商品" disabled />
      <button class="search-btn">搜索</button>
    </view>
    <view class="cart-icon" @click="$emit('cart')">🛒</view>
  </view>
</template>

<script>
export default {
  name: 'SearchBar',
  emits: ['search', 'cart']
};
</script>

<style scoped lang="scss">
@import "../../../static/common.scss";

.search-section {
  @include flex-row;
  align-items: center;
  padding: 20rpx 30rpx;
  background-color: #fff;
  gap: 20rpx;
}

.search-bar {
  flex: 1;
  @include flex-row;
  align-items: center;
  background-color: #f8f8f8;
  border-radius: 50rpx;
  padding: 15rpx 20rpx;
}

.search-icon {
  margin-right: 15rpx;
  font-size: 32rpx;
}

.search-input {
  flex: 1;
  font-size: 28rpx;
}

.search-btn {
  background-color: #ff6b35;
  color: white;
  border: none;
  border-radius: 25rpx;
  padding: 10rpx 20rpx;
  font-size: 24rpx;
}

.cart-icon {
  font-size: 40rpx;
  color: #ff4757;
}
</style>